<template>
    <el-table :data="list" style="width: 100%">

    <el-table-column label="选择" width="55" >
      <template #default="scope">
        <el-checkbox v-model="scope.row.state" size="large" @change="checkHandle(scope.$index)"
        :disabled = "show==!scope.row.state"/>
      </template>
    </el-table-column>
    <el-table-column label="编号" width="150">
      <template #default="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column label="待办事项" width="200">
      <template #default="scope">{{ scope.row.content }}</template>
    </el-table-column>
    <el-table-column label="创建时间" width="150">
      <template #default="scope">{{ scope.row.startDate }}</template>
    </el-table-column>
    <el-table-column label="完成时间" width="120">
      <template #default="scope">{{ scope.row.finishDate }}</template>
    </el-table-column>
    <el-table-column align="right">
      <template #default="scope">
        <el-button
          size="small"
          type="success"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ElMessageBox } from 'element-plus';
export default {
    data() {
      return {
        show:false,
        list1:this.list
      }
    },
    props:{list:Array},
    methods:{
      checkHandle(i){
        ElMessageBox.confirm(
          '你确定任务完成了吗?',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '点错了',
            type: 'warning',
          }
        )
          .then(() => {
            this.$emit('finish',i)
          })
          .catch(() => {
            this.$emit('cancer',i)
            // this.list1[i].state = false
          })
      },
      handleDelete(i){
        ElMessageBox.confirm(
          '确定要删除吗?',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '不确定',
            type: 'warning',
          }
        )
          .then(() => {
            this.$emit('del',i)
          })
          .catch(() => {
            
          })
      }
    }
}
</script>

